<template>
  <h1>SearchForm 搜索表单</h1>
  <p>
    一种搜索表单风格，使用 search-form 与 search-form-item 拼凑表单框架，配合
    radio-group、checkbox-group、selector实现 search、reset、折叠的功能。
  </p>

  <h3>基础用法</h3>
  <!-- prettier-ignore -->
  <code-demo>
    <search-form @reset="reset">
      <search-form-item label="单选：">
        <radio-group
          :list="[
            { label: '男', value: '1' },
            { label: '女', value: '0' },
          ]"
          v-model="formData.sex"
          @change="search"
        ></radio-group>
      </search-form-item>

      <search-form-item label="多选：">
        <checkbox-group
          valueOfAll="全部"
          :list="[
            { label: '全部', value: '全部' },
            { label: '羽毛球', value: '0' },
            { label: '篮球', value: '1' },
          ]"
          v-model="formData.hobby"
          @change="search"
        ></checkbox-group>
      </search-form-item>

      <search-form-item label="下拉单选：">
        <selector
          v-model="formData.age"
          :options="[
            { label: '1-10', value: 1 },
            { label: '11-20', value: 2 },
          ]"
          @change="search"
        ></selector>
      </search-form-item>
    </search-form>

    <template #code>
      {{ `
<template>
  <search-form @reset="reset">
    <search-form-item label="单选：">
      <radio-group
        :list="[
          { label: '男', value: '1' },
          { label: '女', value: '0' },
        ]"
        v-model="formData.sex"
        @change="search"
      ></radio-group>
    </search-form-item>

    <search-form-item label="多选：">
      <checkbox-group
        valueOfAll="全部"
        :list="[
          { label: '全部', value: '全部' },
          { label: '羽毛球', value: '0' },
          { label: '篮球', value: '1' },
        ]"
        v-model="formData.hobby"
        @change="search"
      ></checkbox-group>
    </search-form-item>

    <search-form-item label="下拉单选：">
      <selector
        v-model="formData.age"
        :options="[
          { label: '1-10', value: 1 },
          { label: '11-20', value: 2 },
        ]"
        @change="search"
      ></selector>
    </search-form-item>
  </search-form>
</template>

<script setup>
import { ref } from 'vue'

const defaultFormData = {
  sex: '0',
  hobby: [],
  age: null,
}

const formData = ref({ ...defaultFormData })

function search() {
  console.log('search', formData.value)
}

function reset() {
  formData.value = { ...defaultFormData }
  console.log('reset', formData.value)
}
</script>
      ` }}
    </template>
  </code-demo>

  <h3>Attributes</h3>
  <table-info type="prop" :data="propTable"></table-info>

  <h3>Events</h3>
  <table-info type="event" :data="eventTable"></table-info>

  <h3>Slots</h3>
  <table-info type="slot" :data="slotTable"></table-info>

  <h3>SearchFormItem</h3>
  <p>仅提供一个 label 属性和一个 default 插槽。</p>
</template>

<script setup>
import { ref } from 'vue'

const defaultFormData = {
  sex: '0',
  hobby: [],
  age: null,
}

const formData = ref({ ...defaultFormData })

function search() {
  console.log('search', formData.value)
}

function reset() {
  formData.value = { ...defaultFormData }
  console.log('reset', formData.value)
}

const propTable = [
  {
    name: 'list',
    desc: '表单项配置，也可被 default 插槽替代',
    type: 'Array<{ label: string, slotName: string, allowCollpase: boolean }>',
  },
  { name: 'collapseable', desc: '是否显示折叠按钮', type: 'boolean' },
  {
    name: 'collapsed',
    desc: '是否被折叠，可以使用 v-model 传入此属性',
    type: 'boolean',
    default: 'false',
  },
  {
    name: 'showRestBtn',
    desc: '是否显示重置按钮，也可以使用 v-slot="resetBtn" 插槽来自定义',
    type: 'boolean',
    default: 'true',
  },
]

const eventTable = [
  { name: 'reset', desc: '点击重置按钮时触发', type: '() => {}' },
  {
    name: 'update:collapsed',
    desc: '点击折叠按钮时触发',
    type: '(newCollapsed) => {}',
  },
]

const slotTable = [
  {
    name: 'default',
    desc: '默认插槽，当 search-form-item 结构不能满足需求时，可使用此插槽完全重写此界面',
  },
  {
    name: 'resetBtn',
    desc: '重置按钮的插槽，需要实现 reset 事件',
  },
]
</script>
